<template>
	<view>
		<u-navbar title="场地预约"></u-navbar>

		<view>
			<image style="width: 100%; height: 400rpx;" mode="aspectFill" :src='srcUrl'>
			</image>
		</view>

		<view style="margin-top: 20rpx;">
			<view class="cu-form-group">
				<view class="title">预约日期</view>
				<picker @change="PickerChange1" :value="index1" :range="picker1">
					<view class="picker">
						{{index1>-1?picker1[index1]:'选择日期'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">预约人数</view>
				<picker @change="PickerChange2" :value="index2" :range="picker2">
					<view class="picker">
						{{index2>-1?picker2[index2]:'选择预约人数'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">预约人年龄</view>
				<picker @change="PickerChange3" :value="index3" :range="picker3">
					<view class="picker">
						{{index3>-1?picker3[index3]:'选择预约人年龄'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">球队类型</view>
				<picker @change="PickerChange4" :value="index4" :range="picker4">
					<view class="picker">
						{{index4>-1?picker4[index4]:'选择球队类型'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">球龄</view>
				<picker @change="PickerChange5" :value="index5" :range="picker5">
					<view class="picker">
						{{index5>-1?picker5[index5]:'选择球龄'}}
					</view>
				</picker>
			</view>
		</view>


		<view
			style="display: flex; justify-content: flex-start; align-items: center; margin-left: 35rpx; margin-top: 30rpx;">
			<view>
				<u-radio-group v-model="value">
					<u-radio @change="check"></u-radio>
				</u-radio-group>
			</view>
			<view style="font-size: 25rpx; color: #909399; margin-left: -10rpx;">
				<text>我已阅读并同意有球必应</text>
				<text style="color: #2979ff;">《预约政策》</text>
				<text>和</text>
				<text style="color: #2979ff;">《用户协议》</text>
			</view>
		</view>

		<view style="display: flex; justify-content: center; margin-top: 20rpx;">
			<button class="cu-btn round bg-blue" @click="complete" style="width: 680rpx;">
				确认预约
			</button>
		</view>
		<view>
			<u-modal v-model="show" :content="content" :show-cancel-button="true" @confirm="confirm"></u-modal>
		</view>
	</view>
</template>


<script>
	import card from '../../components/pop-card/pop-card.vue'
	let baseObj = {
		id: 0,
		content: '',
		des: '',
		len: 0,
		date: 0,
		personNum: 0,
		year: 0,
		type: '',
		qiuling: 0,
	};
	let orderData = [];
	export default {
		data() {
			let url = null;
			return {
				show: false,
				content: '确认信息是否正确',
				srcUrl: url,
				value: 'ok',
				index1: -1,
				picker1: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
				index2: -1,
				picker2: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
				index3: -1,
				picker3: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
				index4: -1,
				picker4: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
				index5: -1,
				picker5: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.emit('callBack', true);
			uni.$on('updateObj', this.updateObj)
		},
		getOrderData() {
			return orderData;
		},
		methods: {
			complete() {
				this.show = true;
				baseObj.content = this.srcUrl;
				baseObj.date = this.picker1[this.index1];
				baseObj.personNum = this.picker2[this.index2];
				baseObj.year = this.picker3[this.index3];
				baseObj.type = this.picker4[this.index4];
				baseObj.qiuling = this.picker5[this.index5];
			},
			confirm() {
				let obj = {};
				for (let key in baseObj) {
					obj[key] = baseObj[key];
				}
				orderData.push(obj);
				this.show = false;
				uni.navigateBack();
				card.appointSuccess()
			},
			updateObj(obj) {
				const eventChannel = this.getOpenerEventChannel();
				this.srcUrl = obj.content;
				baseObj.id = obj.id;
				baseObj.des = obj.des;
				baseObj.len = obj.len;
				eventChannel.emit('callBack', false);
			},
			check(e) {
				console.log(e)
			},
			PickerChange1(e) {
				this.index1 = e.detail.value
			},
			PickerChange2(e) {
				this.index2 = e.detail.value
			},
			PickerChange3(e) {
				this.index3 = e.detail.value
			},
			PickerChange4(e) {
				this.index4 = e.detail.value
			},
			PickerChange5(e) {
				this.index5 = e.detail.value
			},
		}
	}
</script>

<style>

</style>